<template>
    <div class="echrts1">
        <div class="projectBox">
            <div class="textBox">工程统计</div>
            <div class="commonEchars">
                <RingEcharts1 :commonData="allData"></RingEcharts1>
            </div>
        </div>
        <div class="pieNum">
            <div class="textBox">累计基桩数</div>
            <div class="commonEchars">
                <div class="topecharts">
                    <peiNum :commonData="allData"></peiNum>
                </div>
                <div class="bootomData">
                    <div class="textTitle">检测完成数分布</div>
                    <div class="textData">
                        <div class="top">
                            <div class="oneBox oneBox1">
                                <div class="lefts">Ⅰ类</div>
                                <div class="rights">
                                    {{ allData.FirstClasscount }}
                                </div>
                            </div>
                            <div class="oneBox oneBox2">
                                <div class="lefts">Ⅱ类</div>
                                <div class="rights">
                                    {{ allData.SecondClasscount }}
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="oneBox oneBox3">
                                <div class="lefts">Ⅲ类</div>
                                <div class="rights">
                                    {{ allData.ThirdClasscount }}
                                </div>
                            </div>
                            <div class="oneBox oneBox4">
                                <div class="lefts">Ⅳ类</div>
                                <div class="rights">
                                    {{ allData.FourthClasscount }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pieStatitic">
            <div class="textBox">基桩统计</div>
            <div class="commonEchars">
                <pieStatitic :commonData="allData1"></pieStatitic>
            </div>
        </div>
    </div>
</template>

<script>
import RingEcharts1 from "@/components/public/project"; //建设项目进场材料外委情况动态统计
import peiNum from "@/components/public/peiNum"; //建设项目进场材料外委情况动态统计
import pieStatitic from "@/components/public/pieStatitic"; //建设项目进场材料外委情况动态统计
export default {
    props: ["commonData", "commonData1"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null,
            allData1: null,
        };
    },
    components: {
        RingEcharts1,
        peiNum,
        pieStatitic,
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {
                    this.allData = newVal

                    // this.getData();
                }
            },
            immediate: true
        },

        commonData1: {
            handler(newVal) {
                if (newVal) {
                    this.allData1 = newVal

                    // this.getData();
                }
            },
            immediate: true
        },

    },

    mounted() {
        
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            console.log(this.chartInstance);
            const CubeLeft = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - 9, shape.y - 7];//左上角
                    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 10];//右上角
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                },
            });
            const CubeRight = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 2];//右下
                    const c4 = [shape.x + 18, shape.y - 1];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            const CubeTop = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + 18, shape.y - 1];//右下
                    const c3 = [shape.x + 9, shape.y - 8];//右上
                    const c4 = [shape.x - 9, shape.y - 7];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
            this.$echarts.graphic.registerShape('CubeRight', CubeRight);
            this.$echarts.graphic.registerShape('CubeTop', CubeTop);

            var option = {

                grid: {
                    left: '7%',
                    right: '7%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true,
                },
                // legend: {
                //     data: ['设计值', '实际值'],
                //     textStyle: {
                //         align: 'right',
                //     },
                //     // top: '2%',
                //     // right: '2%',
                //     left: "center",
                //     top: "5%",
                // },
                xAxis: {
                    type: 'category',
                    // data: ['水', '水泥1', '水泥2', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '粉煤灰', '矿粉', '外加剂1', '外加剂2'],//数据
                    // data:this.xDatas,
                    axisLabel: {
                        color: ""
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',

                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: true,
                        lineStyle: {
                            color: '#DEDEDE',
                            // 	opacity:0.1
                        }
                    },
                    axisTick: false,
                },
                yAxis: {
                    // min: 0,//最小
                    // max: 1200,//最大
                    // interval: 200,//相差
                    name: "(kg)",//名称
                    type: 'value',

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',

                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#9D9EA0"
                        }
                    },
                    splitLine: {//分隔辅助线

                    },
                },
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     }
                // },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            lang: [this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "产能分析", '关闭'],
                            // optionToContent: function (opt) {
                            //     var axisData = opt.xAxis[0].data;
                            //     var series = opt.series;
                            //     var table = '<table class="echartsTable"><tbody><tr>'
                            //         + '<td >材料类型</td>'
                            //         + '<td>' + series[0].name + '</td>'
                            //         // + '<td>' + series[1].name + '</td>'
                            //         + '</tr>';
                            //     for (var i = 0, l = axisData.length; i < l; i++) {
                            //         table += '<tr>'
                            //             + '<td>' + axisData[i] + '</td>'
                            //             + '<td>' + series[0].data[i] + '</td>'
                            //             // + '<td>' + series[1].data[i] + '</td>'

                            //             + '</tr>';
                            //     }
                            //     table += '</tbody></table>';
                            //     return table;

                            // }
                            optionToContent: function (opt) {

                                let axisData = opt.xAxis[0].data; //坐标数据
                                let series = opt.series; //折线图数据
                                let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">材料类型</td>'; //表头
                                let tdBodys = ''; //数据
                                // console.log(series)
                                series.forEach(function (item) {
                                    //组装表头
                                    tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                                });
                                let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                                for (let i = 0, l = axisData.length; i < l; i++) {
                                    for (let j = 0; j < series.length; j++) {
                                        //组装表数据
                                        tdBodys += `<td>${series[j].data[i]}</td>`;
                                    }
                                    table += `<tr style="line-height: 30px;height: 30px;"><td style="padding: 2px 10px;text-align: center">${axisData[i]} </td>${tdBodys}</tr>`;
                                    tdBodys = '';
                                }
                                table += '</tbody></table>';
                                return table;
                            },
                        },
                        magicType: {
                            type: ['line', 'bar'],
                            option: {
                                type: 'line'
                            }
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [

                    {
                        name: '用量',
                        type: 'bar',
                        barMaxWidth: 20,
                        zlevel: 10,
                        smooth: true, //平滑曲线显示
                        // barGap: '100%',
                        //  data: value,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#4F93FE'
                                    }, {
                                        offset: 1,
                                        color: '#A7D6FF'
                                    }]
                                },
                                barBorderRadius: [30, 30, 0, 0],
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3b6ebf',
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            }
                        },
                    },
                    // {
                    //     name: "实际值",
                    //     type: "bar",
                    //     barMaxWidth: 20,
                    //     zlevel: 10,
                    //     smooth: true, //平滑曲线显示
                    //     itemStyle: {
                    //         normal: {
                    //             color: {
                    //                 type: 'linear',
                    //                 x: 0,
                    //                 y: 0,
                    //                 x2: 0,
                    //                 y2: 1,
                    //                 colorStops: [{
                    //                     offset: 0,
                    //                     color: '#ffa43a'
                    //                 }, {
                    //                     offset: 1,
                    //                     color: '#FFEDD6'
                    //                 }]
                    //             },
                    //             barBorderRadius: [30, 30, 0, 0],
                    //             // color: '#ffa43a',
                    //             // borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
                    //             // borderWidth: 7,
                    //             label: {
                    //                 show: true, //开启显示
                    //                 position: 'top', //在上方显示
                    //                 textStyle: {
                    //                     //数值样式
                    //                     color: '#915c1e',
                    //                     fontSize: 12,
                    //                     fontWeight: 400,
                    //                 },

                    //             },
                    //         },
                    //     },
                    //     lineStyle: {
                    //         color: "#ffa43a"
                    //     },
                    //     // data: [null, 38.37, 21.55, 17.88, 32.23, 11.02]
                    // }
                ],
            };
            this.chartInstance.setOption(option);
        },
        getData() {
            var that = this
            setTimeout(() => {
                that.updateChart();
            }, 800)
        },
        updateChart() {

            var data = this.allData

            var dataOption = {
                title: {


                    text: this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "原材料消耗",
                },
                xAxis: {

                    // data: ['水', '水泥', '骨料', '粉煤灰', '矿粉', '外加剂'],//数据
                    data: data.StrengthGrade
                },
                series: [
                    //     {

                    //     data: value,
                    // },
                    {
                        data: data.ActualCalculation,//方量
                    },
                    // {

                    //     data: [1844.99, 11169.25, 14121.2, 16715.33, 22115.32, 24519.44, 8441.99, 11619.25, 11421.2, 11675.33, 22115.32, 24159.44],
                    // }
                ]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100);


            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: {



                    textStyle: {
                        fontSize: titleFontSize,
                        // fontWeight: 500

                    },

                },


            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope>
.echrts1 {
    width: 100%;
    height: 100%;


    display: flex;
    justify-content: space-between;
    background: rgba(237, 237, 237, 1);

    .projectBox {
        width: 22%;
        // background: red;
        background: #fff;
        height: 100%;
        padding: 0 20px;
        display: flex;
        margin-right: 0.4%;
        flex-direction: column;

        .textBox {
            position: relative;
            height: 39px;
            line-height: 39px;
            color: rgba(23, 26, 29, 0.6);
            font-size: 15px;
            border-bottom: 1px solid rgba(126, 134, 142, 0.24);
            padding-left: 10px;
        }

        .commonEchars {
            flex: 1;
        }
    }

    .pieNum {
        width: 24%;
        background: #fff;
        display: flex;
        flex-direction: column;

        height: 100%;
        padding: 0 20px;

        .textBox {
            position: relative;
            height: 39px;
            line-height: 39px;
            color: rgba(23, 26, 29, 0.6);
            font-size: 15px;
            border-bottom: 1px solid rgba(126, 134, 142, 0.24);
            padding-left: 10px;
        }

        .commonEchars {
            flex: 1;
            // height: 100%;
            overflow: hidden;

            .topecharts {
                height: 60%;
            }

            .bootomData {
                height: 40%;
                display: flex;
                flex-direction: column;
                padding: 0 20px 10px 20px;
                // border: 1px solid green;
                box-sizing: border-box;
                

                .textTitle {
                    height: 20px;
                    // border: 1px solid red;
                    line-height: 20px;
                   font-size: 16px;
                    color: rgba(23, 26, 29, 0.4);
                }

                .textData {
                    display: flex;
                    flex-wrap: wrap;
                    height: 85%;
                    // flex: 1;
                    justify-content: space-between;
                    // justify-content: space-evenly; /* 水平均匀分布 */
                    align-items: center;

                    /* 垂直居中 */
                    .oneBox1 {
                        background: url("@/assets/img/foundationPie/01.png") no-repeat;

                        .rights {
                            color: rgba(114, 145, 253, 1);
                        }
                    }

                    .oneBox2 {
                        background: url("@/assets/img/foundationPie/02.png") no-repeat;

                        .rights {
                            color: rgba(255, 217, 111, 1);
                        }
                    }

                    .oneBox3 {
                        background: url("@/assets/img/foundationPie/03.png") no-repeat;

                        .rights {
                            color: rgba(255, 179, 0, 1);
                        }
                    }

                    .oneBox4 {
                        background: url("@/assets/img/foundationPie/04.png") no-repeat;

                        .rights {
                            color: rgba(253, 115, 115, 1);
                        }
                    }

                    .top {
                        display: flex;
                        width: 100%;
                        height: 50%;
                        justify-content: space-between;

                        .oneBox {
                            width: 48%;
                            height: 80%;
                            // border: 1px solid red;
                            margin-top: 5px;
                            background-size: 100% 100%;
                            display: flex;
                            justify-content: space-between;

                            .lefts {
                                width: 23%;
                                // border: 1px solid red;
                                font-size: 14px;
                                color: #fff;
                                text-align: center;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            .rights {
                                width: 65%;
                                font-size: 18px;
                                font-weight: 700;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }

                    .bottom {
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
                        height: 50%;

                        .oneBox {
                            width: 48%;
                            height: 80%;
                            // border: 1px solid red;
                            margin-top: 5px;
                            background-size: 100% 100%;
                            display: flex;
                            justify-content: space-between;

                            .lefts {
                                width: 23%;
                                font-size: 14px;
                                color: #fff;
                                text-align: center;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            .rights {
                                width: 65%;
                                font-size: 18px;
                                font-weight: 700;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                }
            }
        }
    }

    .pieStatitic {
        width: 51%;
        background: #fff;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0 20px;
        margin-left: 0.4%;

        .textBox {
            position: relative;
            height: 39px;
            line-height: 39px;
            color: rgba(23, 26, 29, 0.6);
            font-size: 15px;
            border-bottom: 1px solid rgba(126, 134, 142, 0.24);
            padding-left: 10px;
        }

        .commonEchars {
            flex: 1;

            .textBox {
                position: relative;
                height: 39px;
                line-height: 39px;
                color: rgba(23, 26, 29, 0.6);
                font-size: 15px;
                border-bottom: 1px solid rgba(126, 134, 142, 0.24);
                padding-left: 10px;
            }

            .commonEchars {
                flex: 1;
            }
        }
    }
}

.echrts1 .textBox::before {
    display: block;
    content: "";
    border-left: 4px solid rgba(23, 26, 29, 0.6);
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translate(-50%, -50%);
    height: 14px;
}
</style>
